<template>
  <div class="coupon" @click="$emit('click',item)">
    <div class="left">
        <p>￥{{item.reduce_price}}</p>
        <p>满{{item.min_price}}元可用</p>
    </div>
    <div class="middle"></div>
    <div class="right">
        <p class="name">{{item.name}}</p>
        <p class="description">
            <span>{{item.start_time?`${item.start_time}~${item.end_time}`:`领取${item.expire_day}天内有效`}}</span>
            <slot></slot>
        </p>
        <div class="type">满减券</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CouponItem',
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<style lang="less" scoped>

.coupon {
    width: 345px;
    height: 90px;
    margin: 8px auto;
    background: linear-gradient(-128deg,#ff6d6d,#ff3636);
    color: white;
    display: flex;
     overflow: hidden;

    .left {
        height: 100%;
        width: 113px;
        text-align: center;
        display: flex;
        flex-flow: column;
        justify-content: center;

        p:first-child {
            font-weight: 700;
            font-size: 26px
        }

        p:last-child {
            font-size: 11px;
        }
    }

    .middle {
        width: 2px;
        height: 100%;
        background-color: white !important;
        position: relative;

        &::before {
            content: "";
            position: absolute;
            width: 12px;
            height: 6px;
            background: white;
            left: -5px;
            border-radius: 0 0 8px 8px;
        }

        &::after {
            content: "";
            position: absolute;
            width: 12px;
            height: 6px;
            background: white;
            left: -5px;
            bottom: 0;
            border-radius: 8px 8px 0 0;
        }
    }

    .right {
        height: 100%;
        width: 224px;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        padding-left: 10px;
        position: relative;
        overflow: hidden;

        .name {
            font-size: 16px;
        }

        .description {
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }

        .type {
            position: absolute;
            top: 0;
            right: 0;
            width: 64px;
            padding: 3px 0;
            background: #a771ff;
            font-size: 10px;
            text-align: center;
            color: #fff;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transform-origin: 32px 32px;
            transform-origin: 32px 32px;
        }
    }
}

</style>
